import React, { PureComponent } from 'react';
import { findDOMNode } from 'react-dom';
import { connect } from 'dva';
import { Card, InputNumber, Button, Modal, Form, notification } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import * as math from 'mathjs';
import Link from 'umi/link';
import styles from './DetailsByMerchant.less';

const FormItem = Form.Item;

@connect(({ detailsByMerchant, loading }) => ({
  detailsByMerchant,
  loading: loading.models.list,
}))
@Form.create()
class DetailsByMerchant extends PureComponent {
  state = {
    visible: false,
    done: false,
  };

  formLayout = {
    labelCol: { span: 7 },
    wrapperCol: { span: 13 },
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'detailsByMerchant/fetch',
    });
  }

  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  showEditModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleDone = () => {
    setTimeout(() => this.addBtn.blur(), 0);
    this.setState({
      done: false,
      visible: false,
    });
  };

  handleCancel = () => {
    setTimeout(() => this.addBtn.blur(), 0);
    this.setState({
      visible: false,
    });
  };

  handleSubmit = e => {
    e.preventDefault();
    const { dispatch, form } = this.props;
    Math.formatInt = f => {
      const m = math.eval(f * 100);
      return math.round(m);
    };
    form.validateFields((err, fieldsValue) => {
      const price = Math.formatInt(fieldsValue.price);
      if (err) return;
      this.setState({
        visible: false,
      });
      if (price / 100 < 50) {
        notification.success({
          message: '金额不足',
          description: '提现金额需要大于50!',
        });
      } else {
        dispatch({
          type: 'detailsByMerchant/update',
          payload: { price },
        });
        notification.success({
          message: '成功提交',
          description: '您已成功提交！',
        });
      }
    });
  };

  render() {
    const {
      detailsByMerchant: { data, userInfo },
    } = this.props;
    const {
      form: { getFieldDecorator },
    } = this.props;
    const { visible, done } = this.state;

    const modalFooter = { okText: '保存', onOk: this.handleSubmit, onCancel: this.handleCancel };

    const cardInfo = data ? (
      <div style={{ background: 'white', padding: '30px' }}>
        <Card title={`${data.name}`} bordered={false} style={{ width: 300 }}>
          <p>余额:{`${data.balance / 100 || 0}`}</p>
          <p>在途佣金:{`${data.awaitBalance / 100 || 0}`}</p>
          {userInfo.alipay ? (
            <Button
              type="primary"
              style={{ width: '100%', marginBottom: 8 }}
              icon="download"
              onClick={e => {
                e.preventDefault();
                this.showEditModal();
              }}
              ref={component => {
                /* eslint-disable */
                this.addBtn = findDOMNode(component);
                /* eslint-enable */
              }}
            >
              发起提现
            </Button>
          ) : (
            <Button type="primary" block>
              <Link to="/bindAlipayOrbankCard/bindAlipayOrbankCard">绑定支付宝</Link>
            </Button>
          )}
        </Card>
      </div>
    ) : null;

    const getModalContent = () => (
      <Form onSubmit={this.handleSubmit}>
        <FormItem label="金额" {...this.formLayout}>
          {getFieldDecorator('price', {
            rules: [{ required: true, message: '请输入提现' }],
          })(<InputNumber min={0} max={999999999} />)}
        </FormItem>
      </Form>
    );
    return (
      <PageHeaderWrapper>
        <div className={styles.standardList}>
          <Card
            className={styles.listCard}
            bordered={false}
            title="店铺钱包"
            style={{ marginTop: 24 }}
            bodyStyle={{ padding: '0 32px 40px 32px' }}
          >
            <card />
            <div className={styles.coverCardList}>
              <div className={styles.cardList}>{cardInfo}</div>
            </div>
          </Card>
        </div>
        <Modal
          title={done ? null : `提现管理`}
          className={styles.standardListForm}
          width={640}
          bodyStyle={done ? { padding: '72px 0' } : { padding: '28px 0 0' }}
          destroyOnClose
          visible={visible}
          {...modalFooter}
        >
          {getModalContent()}
        </Modal>
      </PageHeaderWrapper>
    );
  }
}

export default DetailsByMerchant;
